

@color-white: #fff;
@color-gray: #ccc;
@color-gray-light: #eee;
@color-gray-dark: #aaa;
@color-red: #a40000;
@color-placeholder: #808080;

@color-text: #333;

@color-nav: #f9f9f9;

@color-warn: #fffbe6;

@color-wechat: #2f9833;

@color-theme: #005fbc;

@color-primary: #005fbc;
@color-primary-light: lighten(@color-primary, 8%);
@color-primary-dark: darken(@color-primary, 8%);

@border-primary: solid 1px @color-primary;
@border-gray: solid 1px @color-gray;
@border-gray-light: solid 1px @color-gray-light;
@border-gray-dark: solid 1px @color-gray-dark;

@border-gray-5: solid 5px @color-gray;
@border-gray-light-5: solid 5px @color-gray-light;
//@border-gray-light-5: solid 5px @color-theme;
@border-gray-dark-5: solid 5px @color-gray-dark;

@btn-radius: 8rpx;
@btn-mini-radius: 5rpx;

@ico-size-xs: 20rpx;
@ico-size-s: 28rpx;
@ico-size-m: 40rpx;
@ico-size-l: 50rpx;
@ico-size-xl: 60rpx;

@text-size-xs: 20rpx;
@text-size-s: 24rpx;
@text-size-s2: 25rpx;
@text-size-s3: 26rpx;
@text-size-s4: 27rpx;
@text-size-s5: 28rpx;
@text-size-m: 30rpx;
@text-size-m2: 31rpx;
@text-size-m3: 32rpx;
@text-size-m4: 33rpx;
@text-size-m5: 34rpx;
@text-size-l: 35rpx;
@text-size-xl: 40rpx;
@text-size-xxl: 45rpx;

@list-line-height: 110rpx;
@list-line-height-l: 140rpx;
@list-line-height-xl: 170rpx;

@text-margin-xs: 5rpx;
@text-margin-s: 10rpx;
@text-margin: 15rpx;
@text-margin-l: 20rpx;
@text-margin-xl: 25rpx;


/* 块边距 - 标准 */
@block-padding-left: 30rpx;
@block-padding: 0 @block-padding-left;

.block-padding() {
  padding: @block-padding;
}

.block-margin() {
  margin: @block-padding;
}

.clear-after() {

  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

.tip-label {
  padding: 2rpx 5rpx;
  text-align: center;
  font-size: @text-size-xs;
  border-radius: 5rpx;
}

.tip-label-primary {
  .tip-label;
  color: @color-white;
  background-color: @color-primary;
}

.tip-label-primary-outline {
  .tip-label;
  color: @color-primary;
  background-color: fade(@color-primary, 20%);
}

.ico-xs() {
  width: @ico-size-xs;
  height: @ico-size-xs;
}

.ico-s() {
  width: @ico-size-s;
  height: @ico-size-s;
}

.ico-m() {
  width: @ico-size-m;
  height: @ico-size-m;
}

.ico-l() {
  width: @ico-size-l;
  height: @ico-size-l;
}

.ico-xl() {
  width: @ico-size-xl;
  height: @ico-size-xl;
}

.ico-avatar-l() {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
}

.ico-avatar() {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
}

.ico-avatar-s() {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
}

.ico-sku() {
  width: 140rpx;
  height: 140rpx;
  border-radius: 5rpx;
}

.ico-sku-s() {
  width: 120rpx;
  height: 120rpx;
  border-radius: 5rpx;
}

.opacity-gray() {
  opacity: .5;
}

.opacity-gray-light() {
  opacity: .3;
}

.opacity-gray-dark() {
  opacity: .7;
}

.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.flex-start() {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}

.flex-end() {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
}

.flex-between() {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.flex-between() {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.text-ellipsis() {
  overflow:hidden; /* 超出一行文字自动隐藏 */
  text-overflow:ellipsis; /* 文字隐藏后添加省略号 */
  white-space:nowrap; /* 强制不换行 */
}